"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "./swiper.css";
import "swiper/css/navigation";
export interface HomeProps {
  homeMedia: API.ReturnHomeMediaDto[];
}

export const SwiperImage: React.FC<HomeProps> = ({ homeMedia }) => {
  return (
    <div>
      <Swiper
        modules={[Navigation]}
        navigation={true}
        pagination={{
          clickable: true,
        }}
        loop
        autoplay={{
          delay: 2000,
        }}
      >
        {homeMedia.map((item) => (
          <SwiperSlide key={item.id}>
            <div className="relative w-full h-[500px]">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                className="w-full rounded-lg"
                src={item.file.href}
                alt="Slide 1"
                style={{
                  width: "100%",
                  maxWidth: "1200px",
                  margin: "auto",
                }}
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};
